<template>
    <Description class="description" :column="column" :data="mockData" :schema="schema"></Description>
    <BasicTable @register="registerTable" :showTableSetting="false">
      <template #imgs="{ text }">
        <div style="width: 100%;display: flex;flex-wrap: wrap;">
          <TableImg :imgList="text" style="flex: 1;" :size="60" ></TableImg>
        </div>
      </template>
       <template #bodyCell="{ column, record }">
        <div v-if="column.key === 'variantThemes'" color="green">
          {{ record.variantThemes }}{{ record.color?('-'+record.color):'' }}-{{ record.size?('-'+record.size):'' }}
        </div>
      </template>
    </BasicTable>
</template>

<script lang="tsx" setup>
import { ref } from 'vue';
import { Description, DescItem } from '/@/components/Description/index';
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
import { BasicTable, BasicColumn,TableImg } from '/@/components/Table';
import { querySkuById } from '../AmazonTaskProduct.api';
import { useListPage } from '/@/hooks/system/useListPage';
const column = ref(3);
const mockData: Recordable = ref({});
const schema: DescItem[] = [
    {field: 'title',label: '商品名称',span: 3,labelMinWidth:56},
    {
        field: 'productImage',
        label: '图片',
        span: 3,
        render: (curVal) => {
            if(curVal){
                let tempArr = curVal || []
                let values:Record<string,any>[] = [];
                try {
                  values = JSON.parse(tempArr)
                } catch (error) {
                  console.log(error)
                }
                let arr:string[] = [];
                for (const s of values) {
                  arr.push(s.image_url);
                }
                const renderContainer = () => {
                    return (
                        <JImageUpload fileMax={0} v-model:value={arr} disabled></JImageUpload>
                    )
                };
                return renderContainer()
            }
            return undefined
        },
    },
    {field: 'sku',label: 'sku',span: 1},
    {field: 'brand',label: '品牌',span: 1},
    {field: 'standardPrice',label: '最低价'},
    {field: 'highPrice',label: '最高价'},
    {field: 'yunfei',label: '运费'},
    {field: 'quantity',label: '库存'},
    {field: 'startDate',label: '上架时间'},
    {field: 'currency',label: '货币单位',span:column.value-1},
    {field: 'taskId',label: '采集任务id',span: 1},
    {field: 'asin',label: 'asin码',span: column.value},
    {field: 'cateStr',label: '分类字符',span: column.value,
        render:(curVal)=>{
            const arr = ((curVal||'') as string).split('>')
            return ( <a-breadcrumb>
                {
                    arr.map((item)=>{
                        return <a-breadcrumb-item style="color:blue">{item}</a-breadcrumb-item>
                    })
                }
                </a-breadcrumb>
            )
        }
    },
    {field: 'sellerAddress',label: '卖家地址',span: column.value},
    {
        field: 'point',label: '五点描述',span: column.value,
        render:(curVal)=>{
            return <a-textarea rows={6} v-model:value={curVal}></a-textarea>
        }
    },
    {   
        field: 'description',label: '长描述',span: column.value,
        render:(curVal)=>{
            return <a-textarea rows={10} v-model:value={curVal}></a-textarea>
        }
    },
    {field: 'purchase',label: '原链接',
        render:(curVal)=>{
            return (<div style="display: flex;align-items: center;">
                <a-input v-model:value={curVal} placeholder="" style="flex: 1;"></a-input>
                <a href={curVal} target="_blank" style="margin-left: 10px;">跳转网页</a>
            </div>)
        }
    },
]
 const columns: BasicColumn[] = [
  {
    title: '变体',
    align: "center",
    dataIndex: 'variantThemes'
  },
  {
    title: '库存',
    align: "center",
    dataIndex: 'quantity'
  },
  {
    title: '最低价',
    align: "center",
    dataIndex: 'standardPrice'
  },
  {
    title: '最高价',
    align: "center",
    dataIndex: 'highPrice'
  },
  {
    title: '图片',
    align: "center",
    dataIndex: 'productImage',
    ellipsis:false,
    width: 400,
    slots: { customRender: 'imgs' },
  },
];
//注册table数据
  const { tableContext } = useListPage({
    tableProps: {
      title: '',
      showTableSetting:false,
      api: querySkuById,
      columns,
      canResize:true,//是否可以自适应高度(
      useSearchForm: false,//使用搜索表单
      pagination:true,//分页信息配置，
      showActionColumn:false,//是否显示操作列
      beforeFetch: async (params) => {
        return Object.assign(params, {id:mockData.value.id})
      },
      afterFetch:(res)=>{
        console.log(res)
        for (const s of res) {
          try {
            const values = JSON.parse(s.productImage) || []
            let arr:string[] = [];
            for (const s of values) {
              arr.push(s.image_url);
            }
            s.productImage = arr;
          } catch (error) {
            console.log(error)
            s.productImage = []
          }
        }
      }
    },
  });
  const [registerTable,  {reload} ] = tableContext;
function add() {
    edit({});
}
function edit(record) {
    record.point =  record.point1 + '\n' + record.point2 + '\n' + record.point3 + '\n' + record.point4 + '\n' + record.point5
    let de = record.description || ''
    record.description =  de.replace(/<br>/g,'\n')
    mockData.value = record;
    dispathTable()
}
function dispathTable(){
      // 通过sku查询变体
      reload();
}
defineExpose({
    add,
    edit
})
</script>

<style>
.description {
    padding:0 8px;
}
</style>